  <template>
    <span>{{sum}}</span> <br>
    <button @click="sum++">+1</button>
  </template>
  
  <script>
  import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
  export default {
    name: 'App',
    setup(){
      let sum = ref(0);

      onBeforeMount(()=>{
        console.log('onBeforeMount');
      }),
      onMounted(()=>{
        console.log('onMounted');
      }),
      onBeforeUpdate(()=>{
        console.log('onBeforeUpdate');
      }),
      onUpdated(()=>{
        console.log('onUpdated');
      }),
      onBeforeUnmount(()=>{
        console.log('onBeforeMount');
      }),
      onUnmounted(()=>{
        console.log('onUnmounted');
      })



      return {
        sum
      }
    },
    // 使用配置项 写生命周期钩子
    // beforeCreate(){
    //   console.log('beforeCreate');
    // },
    // created(){
    //   console.log('created');
    // },
    // beforeMount(){
    //   console.log('beforeMount');
    // },
    // mounted(){
    //   console.log('mounted');
    // },
    // beforeUpdate(){
    //   console.log('beforeUpdate');
    // },
    // updated(){
    //   console.log('updated');
    // },
    // beforeUnmount(){
    //   console.log('beforeUnmount');
    // },
    // unmounted(){
    //   console.log('unmounted');
    // }
  }
  </script>
  
  <style>
  
  </style>
  